<template>
	<view class="mallorders">
		<view class="mallorders_quanbu">
			<view class="mallorders__dibu">
				<text @click="sb(item.id)" v-for="item in list" :class="typeid==item.id ? 'active' : ''"
					:key="item.id">{{item.title}}</text>
			</view>


			<view class="mallorders_shang">
				<view v-if="isshow" style="text-align: center; margin-top: 200rpx;">
					<image src="../../static/iconShow/noOrder.png"></image>
				</view>
				<view class="mallorders_shang_a" v-for="item in orederList" :key="item.id">
					<view class="mallorders_shang_top">
						<view class="mallorders_shang_top_left">
							订单号:{{item.orderId}}
						</view>
						<view class="mallorders_shang_top_right" v-if="item.status==0 && item.paid ==1">待发货</view>
						<view class="mallorders_shang_top_right" v-if="item.status==1 && item.paid ==1">待收货</view>
						<view class="mallorders_shang_top_right" v-if="item.status==2 && item.paid ==1">已收货</view>
						<view class="mallorders_shang_top_right" v-if="item.status==3 && item.paid ==1">已完成</view>
					</view>
					<view class="mallorders_shang_zhong" @click="orderform(item.orderId)" v-for="itm in item.cartInfo"
						:key='itm.id'>
						<view class="mallorders_shang_zhong_a">
							<image :src="itm.productInfo.image" class="img"></image>
						</view>
						<view class="mallorders_shang_zhong_b">
							<text class="text1">{{itm.productInfo.keyword}}</text>
							<view class="mallorders_shang_zhong_b_text">
								<text class="text2">{{itm.productInfo.storeInfo}}</text>
								<text class="text3">x{{itm.cartNum}}</text>
							</view>
							<view class="mallorders_shang_zhong_c">
								<text class="text4">{{itm.productInfo.price}}
									<text class="text5">{{item.jq}}</text>
									{{item.o}}
								</text>
							</view>
						</view>
					</view>

					<view class="heji">
						<text class="text1">共{{item.totalNum}}件</text>
						<text class="text2">合计：</text>
						<text class="text3">
							￥
							<text class="text4">{{item.totalPrice}}</text>
						</text>
					</view>
					<view class="dibu">
						<!-- 待发货 -->
						<view style="display: flex;" v-if="item.status==0 && item.paid ==1">
							<text class="text1" @click="cancellationoforder(item.orderId,item.status)">取消订单</text>
						</view>
						<!-- 未付款 -->
						<view style="display: flex;" v-if="item.paid==0">
							<text class="text1" @click="cancellationoforder(item.orderId)">取消订单</text>
							<text class="text2" @click="nowPay(item)">立即付款</text>
						</view>
						<!-- 待收货 -->
						<view style="display: flex;" v-if="item.status==1 && item.paid ==1">
							<text class="text1" @click="orderTake(item.orderId)">确认收货</text>
						</view>
						<!-- 已完成 -->
						<view style="display: flex;" v-if="item.status==3 && item.paid ==1">
							<text class="text1" @click="orderDel(item.orderId)">删除订单</text>
						</view>

					</view>

				</view>
			</view>

		</view>

		<u-popup :show="show" @close="close">
			<view style="height: 360rpx;">
				<view class="purchase_zhifu_fangshi">
					<view class="purchase_zhifu_fangshi_a">
						<view class="purchase_zhifu_top">
							<view>支付方式</view> 
							<u-icon class="icon" name="close-circle" @click="closeicon"></u-icon>
						</view>
						
						<view class="purchase_zhifu_bottom">
							<view
								style="display: flex;justify-content: space-between;align-items: center;padding: 26rpx 0px;">

								<radio-group @change="radioChange" class="radio-group">

									<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in lists"
										:key="item.value">


										<view class="left" v-if="item.value == 0">
											<image class="img" :src="item.src"></image>
											{{item.name}}
											<text style="margin-left: 50rpx;color: #FF8F1F;">￥{{balance}}</text>
										</view>
										<view class="left" v-else>
											<image class="img" :src="item.src"></image>
											{{item.name}}

										</view>
										<view>
											<radio :value="String(item.value)"  color='#00DF25' :checked="index === current"
												style="transform:scale(0.9)" />
										</view>
									</label> 
									<view class="xian">

									</view>
								</radio-group>

							</view>

						</view>

					</view>
					<view class="purchase_bottom">
						<view class="purchase_bottom_left">
							<text class="text1">合计：</text>
							<text class="text2">￥
								<text class="text3">{{waittotalPrice}}</text></text>
						</view>
						<view class="purchase_bottom_right" @click="payment">
							立即支付
						</view>

					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import homeServices from '../../service/homeService'
	export default {
		data() {
			return {
				obj: true,
				objs: true,
				objs2: true,
				ooo: true,
				limit: 10,
				page: 1,
				typeid: -1,
				ID: 1,
				list: [{
						id: -1,
						title: '全部订单'
					},
					{
						id: 0,
						title: '待付款'
					},
					{
						id: 1,
						title: '待发货'
					},
					{
						id: 2,
						title: '待收货'
					},
					{
						id: 4,
						title: '已完成'
					},
				],
				orederList: [],
				loadingType: 0,
				timer: null,
				show: false,
				lists: [{
						value: 0,
						name: '账户余额',
						src: '../../static/imgs/yue.png'
					},
					{
						value: 1,
						name: '微信支付',
						src: '../../static/imgs/weixin.png'
					}
				],
				current: 0,
				waittotalPrice:'',
				balance:'',
				isshow:false

			}
		},
		onLoad(option) {
			
			if (option.id == undefined) {
				this.typeid = -1
			} else {
				this.typeid = option.id
			}
		},
		onShow() {
			this.page = 1
			this.orederList = []
			this.getorderlist()
			this.accountinfo()
		},
		onReachBottom() {
			if (this.timer != null) {
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(() => {
				this.getorderlist()
			}, 500)
		},
		methods: {
			//获取余额
			async accountinfo() {
				let res = await homeServices.accountinfo()
				this.balance = res.data.usableAmount
				console.log(this.balance);
			},
			async getorderlist() {
				if (this.loadingType !== 0) { //loadingType!=0;直接返回

					return false;

				}
				this.loadingType = 1;
				let params = {
					limit: this.limit,
					page: this.page,
					type: this.typeid
				}
				let res = await homeServices.getorderlist(params)
				console.log(res)
				if (res.status == 200) {
					console.log(res.data);
					if(res.total==0){
						this.isshow=true
					}else{
						this.isshow=false
					}
					this.page++
					if (res.data.length < 1) {
						this.loadingType = 2;
						return
					}
					this.orederList = this.orederList.concat(res.data)
					
					
					this.loadingType = 0;
				}

			},
			sb(id) {
				this.loadingType = 0
				this.orederList = []
				this.page = 1
				this.typeid = id
				
				this.getorderlist()
			},
			orderform(orderId) {
				console.log(orderId)
				uni.navigateTo({
					url: `/pagesA/lineitem/lineitem?orderId=${orderId}`
				})
			},
			cancellationoforder(id, status = 50) {
				uni.navigateTo({
					url: '/pagesA/cancellationoforder/cancellationoforder?id=' + id + '&status=' + status
				})
			},
			nowPay(item) {
				this.show = true
				this.waittotalPrice = item.totalPrice
				// this.couponId = item.couponId
				// this.shippingType = item.shippingType
				// this.useIntegral = item.useIntegral
				this.orderKey = item.unique
				
			},
			close() {
				this.show = false
				// console.log('close');
			},
			radioChange(evt) {
				console.log(evt.detail.value);
				this.current = evt.detail.value
				
			},
			async payment(){
				if (this.current == 0) {
					var paytype = 'yue'
					var payfrom = 'yue'
				} else {
					var paytype = 'weixin'
					var payfrom = 'app'
				}
				
				
				uni.showModal({
					title: '提示',
					content: '确定是否支付',
					confirmText:'确定',
					cancelText:'取消',
					success: async res=>  {
						if (res.confirm) {
							console.log('用户点击确定');
							let params = {
								from:payfrom,
								paytype:paytype,
								uni:this.orderKey
							}
							let res1 = await homeServices.gotoPay(params)
							if (res1.status == 200) {
								// console.log(res1.msg);
								if (paytype == 'yue') {
									uni.showToast({
										title:'支付成功',
										icon:'none'
									})
									setTimeout(()=>{
										this.show = false
										this.page = 1
										this.orederList = []
										this.getorderlist()
										this.accountinfo()
									},1500)
								} else {
									console.log(res1.data.result.jsConfig);
									let orderinfo = res1.data.result.jsConfig
									uni.requestPayment({
										provider: 'wxpay',
										orderInfo: orderinfo, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
										success:res=> {
											uni.showModal({
												title: "提示",
												content: "支付成功",
												showCancel: false,
												confirmText: "确定",
												success:reb=> {
													console.log(reb);
													if (reb.confirm) {
														this.show = false
														this.page = 1
														this.orederList = []
														this.getorderlist()
														this.accountinfo()
													}
												},
												fail: function(err) {
													console.log(err);
												}
											})
										},
										fail: function(err) {
											console.log('fail:' + JSON.stringify(err));
										}
									});
								}
							
							}else{
								uni.showToast({
									title:res1.msg,
									icon:'none'
								})
							}
						} else if (res.cancel) {
							return
						}
					}
				
				})
			},
			closeicon(){
				this.show = false
			},
			// 确认收货
			async orderTake(id){
				let params = {
					uni:id
				}
				let res = await homeServices.orderTake(params)
				if(res.status == 200){
					uni.showToast({
						title:'收货成功',
						icon:'none'
					})
					setTimeout(()=>{
						this.page = 1
						this.orederList = []
						this.getorderlist()
					},1500)
				}
				
			},
			//删除订单
			async orderDel(id){
				let params = {
					uni:id
				}
				let res = await homeServices.orderDel(params)
				if(res.status == 200){
					uni.showToast({
						title:'删除成功',
						icon:'none'
					})
					setTimeout(()=>{
						this.page = 1
						this.orederList = []
						this.getorderlist()
					},1500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/sass/mallorders.scss'
	
</style>

